<template>
    <div class="chemical">
        <div class="add" @click="addCheckList()">添加验收人</div>
        <eagle-list ref="eagleList" :tabData="tabData" @bindData="bindData">
            <eagle-cell v-for="(item, index) in list" :key="index" class="card">
                <div>
                    <div>
                        <div >
                            <div>{{ item.ChnName }}</div>
                            <div>
                                <van-row gutter="20" class="dep_sort">
                                    <van-col span="24">
                                        <img src="@/assets/Images/AppIcon/icon_list_danger.png" alt=""
                                            class="icon" />隐患数/检查数:   {{ item.HiddenDangerCnt +'/'+item.CheckCnt }}
                                        {{ item.EHSMobile }}
                                    </van-col>
                                </van-row>
                            </div>
                           
                                <eagle-divider />
                                <div class="dep_btm">
                                    <img src="@/assets/Images/AppIcon/icon_list_delete.png" alt="" class="icon"/>
                                    <div class="btm_item" @click="removeUser(item)">
                                        <div >移除检查人</div>
                                    </div>
                                </div>
                           
                        </div>
                    </div>

                </div>
            </eagle-cell>
        </eagle-list>


        <!--检查人选择-->
        <user-choose-dialog title="选择检查人" :show.sync="userChooseDialogShow" :tagData="tagData"
            @callback="userChooseCallback" :isMulti="true">
        </user-choose-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Dialog } from "vant";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
    components: {
        UserChooseDialog,
    },
    data() {
        return {
            loading: false,
            finished: false,
            ctCode: '',
            value: "",
            list: [],
            userChooseDialogShow: false,
            tabData: [{
                url: "/DangerCheckTaskJG/GetPageDataByCtCode",
                dataType: "CheckUserStatus",
                ctCode: this.ctCode,
                isPage: false,
                params: {
                    taskID: this.$route.query.taskId,
                    dataType: "CheckUserStatus",
                    ctCode: this.ctCode,
                }
            }],
            tagData: []
        };
    },
    computed: {
        ...mapGetters(["CompanyCode"]),
    },
    created() {
        this.ctCode = this.$route.query.ctCode
        this.tabData[0].params.ctCode = this.ctCode
        //this.getList();
    },
    methods: {
        bindData(data) {
            this.list = data.Data;
        },
        removeUser(item){
            Dialog.confirm({
                title: "询问",
                message: '确定要移除['+item.ChnName+']吗？',
            })
            .then(() => {
                let params={
                    ctCode:this.ctCode,
                    userName:item.UserName
                }
                this.$axios
                .get("/DangerCheckTaskJG/RemoveCheckUsers", {params})
                .then((res) => {
                    this.$refs.eagleList.getList();
                })
            })
            .catch(() => {
                // on cancel
            })
       
        },
        userChooseCallback(data) {
            let codeArr = [];
            let nameArr = [];
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    codeArr.push(data[i].UserName);
                    nameArr.push(data[i].ChnName);
                }
            }
            let params = {
                ctCode: this.ctCode,
                userName: codeArr.join(),
                chnName: nameArr.join(),
            };
            let _this = this;
            _this.$axios
                .get("/DangerCheckTaskJG/AddCheckUsers",{params} )
                .then((res) => {
                    _this.$refs.eagleList.getList();
                })
            _this.userChooseDialogShow = false;
        },
        handleDelete(item) {
            let params = {
                taskID: item.TaskID,
                userName: item.UserName,
            };
            Dialog.confirm({
                title: "询问",
                message: "确定要删除该验收人吗?",
            })
                .then(() => {
                    // on confirm
                    let _this = this;
                    _this.$axios
                        .get("/OtherDangerCheckTaskJG/RemoveVerifyUser", { params })
                        .then((res) => {
                            _this.$toast.success("删除成功！");
                            _this.$refs.eagleList.getList();
                        })
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 详情
        addCheckList(ChemCode) {
            this.userChooseDialogShow = true;
            // this.$router.push({
            //   path: "/Danger/AddMyCheckList",
            //   query: { ctCode: this.$route.query.ctCode },
            // });
        }
    },
};
</script>

<style lang="less" scoped>
.chemical {
    background-color: #e8f1f8;

    .info_search {
        padding: 10px;
        border-radius: 5px !important;

        .van-field__control {
            background-color: #ffffff !important;
        }
    }
}

.chemical_item {
    position: relative;
    padding: 10px;
}

.ch_header {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.ch_row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
    }

    .ch_col {
        display: flex;
        align-items: center;
    }
}

.dep_btm {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .btm_item {
        display: flex;
        align-items: center;

        img {
            height: 13px;
            width: 13px;
            margin: 5px;
        }
    }
}

.van-divider {
    margin-top: 0px;
    margin-bottom: 0px;
}

.mr-10 {
    margin-left: 10px;
}
</style>